<template>
	<view class="kind" :style="{paddingTop:top}">
		<view class="list">
			<view class="item" v-for="el in topList" :key="el.id" @tap="jumpCate(el.id)">
				<text>{{el.name}}</text>
				<image :src="el.icon" mode=""></image>
			</view>
			<view class="item1">
				<view class="son" v-for="el2 in bottomList" :key="el2.id" @tap="jumpCate(el2.id)">
					<text>{{el2.name}}</text>
					<image :src="el2.icon" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { findCategory } from "../../api/kind/index.js"
	export default {
		data() {
			return {
				kindList:[],
				topList:[],
				bottomList:[],
				top:0
			};
		},
		methods:{
				jumpCate(id) {
					uni.navigateTo({
						url:`../home/cate/cate?id=${id}`
					})
				}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			var val = uni.getMenuButtonBoundingClientRect()
			this.top = val.top + val.height + 5 + 'px';
			// #endif
			findCategory("1308336521604599809").then(res=>{
				console.log(res)
				this.kindList = res.data.category.children
				this.topList = this.kindList.filter((item,index)=>index<2)
				this.bottomList = this.kindList.filter((item,index)=>index>1)
				console.log(this.topList)
				console.log(this.bottomList)
			})
		}
	}
</script>

<style lang="scss" scoped>
.kind {
	background-color: #f1ece7;
	color: #3E3E3E;
}
.list {
	padding: 40rpx;
	.item {
		display: flex;
		justify-content: space-between;
		width: 670rpx;
		height: 302rpx;
		border-radius: 40rpx 0 0 40rpx;
		background-color: skyblue;
		margin: 56rpx 0 ;
		&:nth-child(1) {
			background-color: #d5d5d5;
			margin-top: 0;
		}
		&:nth-child(2) {
			background-color: #fff;
		}
		text {
			font-size: 48rpx;
			margin: 148rpx 0 0 52rpx;
		}
		image {
			width: 402rpx;
			height: 302rpx;
		}
	}
	.item1 {
		display: flex;
		justify-content: space-between;
		.son {
			position: relative;
			width: 312rpx;
			height: 442rpx;
			background-color: skyblue;
			background-color: #fff;
			&:nth-child(2) {
				border-radius: 40rpx;
				background-color: #d5d5d5;
			}
			image {
				width: 100%;
				height: 100%;
			}
			text {
				position: absolute;
				top: 148rpx;
				left: 52rpx;
				font-size: 48rpx;
				z-index: 6;
			}
		}
	}
}
</style>
